<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页面</title>
  </head>
  <body>
    <h1>主页面</h1>

    <button class="btn">点击按钮，给子页面发送消息</button>

    <!-- 同源的 -->
    <iframe
      src="./03.child-iframe.html"
      frameborder="0"
      id="child-iframe1"
    ></iframe>
    <!-- <iframe
      src="https://www.taobao.com"
      style="width: 100%; height: 400px"
      frameborder="0"
    ></iframe> -->

    <iframe
      src="http://127.0.0.1:5501/index.html"
      frameborder="0"
      id="child-iframe2"
    ></iframe>
    <script>
      /*
        iframe标签：
          1. 概念
            在当前页面嵌套其他页面（父页面套多个子页面）
          2. 通信
            同源情况
              父 -> 子 
                1. 获取子页面iframe标签
                2. 给子页面绑定onload事件
                3. 在事件回调函数中才能获取（操作）子页面的DOM元素
              子 -> 父
                window.parent

            不同源情况
              传递数据：postMessage 方法
              接受数据：onmessage 事件
          3. 应用
            A项目使用B项目
            iframe升级版：微前端框架（qiankun）
      */

      /*
        父页面获取子页面的内容:
          1. 获取子页面iframe标签
          2. 给子页面绑定onload事件
          3. 在事件回调函数中才能获取（操作）子页面的DOM元素
      */
      const childIframe1El = document.getElementById("child-iframe1");
      // childIframe1El.contentWindow; // 子页面的window属性
      // childIframe1El.contentDocument; // 子页面的document属性
      // const h2El = childIframe1El.contentDocument.querySelector("h2");
      // console.log(h2El); // null

      // iframe 渲染相当于异步的。等主页面渲染，在渲染子页面
      childIframe1El.contentWindow.onload = function () {
        const h2El = childIframe1El.contentDocument.querySelector("h2");
        console.log(h2El); // h2
        h2El.innerText += "~~";
      };
    </script>

    <script>
      const childIframe2El = document.getElementById("child-iframe2");
      // 主页面和子页面如果不同源，是不能操作的
      // const h2El = childIframe2El.contentDocument.querySelector("h2");
      // console.log(h2El); // h2
      // childIframe2El.contentWindow.onload = function () {
      //   const h2El = childIframe2El.contentDocument.querySelector("h2");
      //   console.log(h2El); // h2
      // };
      // 主页面和子页面在不同源情况下的通信方案
      // 主页面发送数据给子页面
      document.querySelector(".btn").onclick = function () {
        childIframe2El.contentWindow.postMessage(
          { title: "不同源子页面的标题" },
          "http://127.0.0.1:5501"
        );
      };
      // 接受子页面发送的消息
      window.onmessage = function (e) {
        console.log(e.data);
      };
    </script>
  </body>
</html>
